<template>
  <div class="line-bg">
    <div class="card flex-align-center">
      <div v-for="{ title, value } in cardData" :key="title" class="card-item flex-1">
        <div class="title">{{ title }}</div>
        <div class="value">
          <count-to :end-val="value" :decimals="2"></count-to>
        </div>
      </div>
    </div>
    <div class="chart-bg echarts">
      <!-- 图表 -->
      <div :id="customId" class="line-bg-chart"></div>
      <!-- 背景 -->
      <div class="bg-color"></div>

      <div class="bg-img"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { toThousands } from '@/utils/index';
import gridBg from '@/assets/images/grid_bg.png';
const bg = `url(${new URL(gridBg, import.meta.url).href})`;
const props = defineProps({
  cardData: {
    type: Array
  },
  customId: {
    type: String
  },
  chartData: {
    type: Object
  }
});
watch(
  props,
  val => {
    initChart();
  },
  { deep: true }
);

onUnmounted(() => {
  echarts.dispose();
});

function initChart() {
  const chart = echarts.init(document.getElementById(props.customId));
  const option = {
    color: ['#AA22FE', '#FF7D45', '#1EB5FA'],
    title: {
      text: props.chartData.title,
      left: 0,
      textStyle: {
        color: '#FFFFFF',
        fontSize: 36
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      itemGap: 30,
      itemWidth: 26,
      itemHeight: 26,
      right: 36,
      icon: 'circle',
      textStyle: {
        color: '#869498',
        fontSize: 32,
        height: 26,
        rich: {
          a: {
            verticalAlign: 'middle'
          }
        }
      },
      data: [
        {
          name: props.cardData[0].title,
          itemStyle: {
            color: '#AA22FE'
          }
        },
        {
          name: '数字人民币',
          itemStyle: {
            color: '#FF7D45'
          }
        },
        {
          name: '二类户',
          itemStyle: {
            color: '#1EB5FA'
          }
        }
      ]
    },
    grid: {
      top: 100,
      left: 24,
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      show: false,
      type: 'category',
      boundaryGap: false,
      data: props.chartData.xAxisData
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 24,
        margin: 40,
        formatter: (value, index) => (value === 0 ? value : value / 10000 + 'w')
      },
      // 网格线
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: props.cardData[0].title,
        type: 'line',
        areaStyle: {
          type: 'linear',
          opacity: 0.3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255, 35, 154, 0.8)'
            },
            {
              offset: 1,
              color: 'rgba(33, 121, 223, 0)'
            }
          ])
        },
        lineStyle: {
          width: 4,
          type: 'linear',
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#6C17F9'
            },
            {
              offset: 0.5,
              color: '#B01DFB '
            },
            {
              offset: 1,
              color: '#EB22FE'
            }
          ])
        },
        smooth: true,
        symbol: 'none',
        data: props.chartData.data.list1
      },
      {
        name: '数字人民币',
        type: 'line',
        areaStyle: {
          type: 'linear',
          opacity: 0.3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255, 200, 30, 1)'
            },
            {
              offset: 1,
              color: 'rgba(247, 179, 77, 0)'
            }
          ])
        },
        lineStyle: {
          width: 4,
          type: 'linear',
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#FE6C4C'
            },
            {
              offset: 0.5,
              color: '#FF9B36'
            },
            {
              offset: 1,
              color: '#FFC81E'
            }
          ])
        },
        smooth: true,
        symbol: 'none',
        data: props.chartData.data.list2
      },
      {
        name: '二类户',
        type: 'line',
        areaStyle: {
          type: 'linear',
          opacity: 0.3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(35, 229, 255, 0.8)'
            },
            {
              offset: 1,
              color: 'rgba(33, 121, 223, 0)'
            }
          ])
        },
        lineStyle: {
          width: 4,
          type: 'linear',
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#178DF9'
            },
            {
              offset: 0.5,
              color: '#1FB9FA'
            },
            {
              offset: 1,
              color: '#22F0FE'
            }
          ])
        },
        smooth: true,
        symbol: 'none',
        data: props.chartData.data.list3
      }
    ]
  };
  // 把配置和数据放这里
  chart.setOption(option);
}
</script>

<style scoped lang="less">
.line-bg {
  box-sizing: border-box;
  width: 713px * 2;
  height: 400px * 2;
  padding: 20px * 2;
  border-radius: 10px * 2;
  background: linear-gradient(180deg, #0e2d35 0%, rgba(14, 45, 53, 0.2) 100%);
  .card {
    margin-bottom: 30px * 2;
    .card-item {
      .title {
        color: #fff;
        text-align: center;
        font-size: 18px * 2;
        line-height: 20px * 2;
        margin-bottom: 10px * 2;
      }
      .value {
        color: #4bf3dc;
        text-align: center;
        font-size: 32px * 2;
        font-weight: 700;
        line-height: 36px * 2;
      }
    }
  }

  .chart-bg {
    position: relative;
    .line-bg-chart {
      width: 673px * 2;
      height: 268px * 2;
      z-index: 99;
    }
    .bg-img {
      position: absolute;
      top: 80px;
      left: 12px * 2;
      width: 651px * 2;
      height: 220px * 2;
      background-image: v-bind(bg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .bg-color {
      position: absolute;
      box-sizing: border-box;
      border-radius: 5px * 2;
      background-color: #091f26;
      padding: 12px * 2;
      top: 60px;
      left: 0;
      width: 673px * 2;
      height: 240px * 2;
    }
  }
}
</style>
